<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/patient" is-telescreen />

    <main-content>
      <div class="p-8 flex justify-center w-3/5" style="box-shadow:  0px 0px 4px 0px rgba(0, 0, 0, 0.5);
           background-color: white;overflow: auto;border-radius: 5px;"
      >
        <n-space v-if="ProcessRef.Process[0].startTime != '9999-99-99'" vertical class="mt-2 mb-2">
          <n-steps vertical :current="(current as number)" :status="currentStatus">
            <n-step v-for="(item,i) in ProcessRef.Process" :key="i" :title="item.iname" style="max-width: 50vw;">
              <strong>医生:</strong> {{ item.name }}
              <strong>地点:</strong> {{ item.therapyAddress }}
              <strong>日期:</strong> {{ item.startTime.split('T')[0] }}
              <strong>完成时间:</strong> {{ item.finishTime }} 分钟
              <strong>间隔时间:</strong> {{ item.intervalTime }} 分钟
            </n-step>
          </n-steps>
        </n-space>
        <div v-else class="text-2xl">
          当前没有流程
        </div>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, StepsProps, NSpace,
  NStep, NSteps } from 'naive-ui'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { transStatus, reqGetProcess } from './patient.def'

const ProcessRef = ref({
  Process: [{
    prId: 9999,
    startTime: '9999-99-99',
    id: 9999,
    status: 0,
    therapyAddress: '九九九',
    intervalTime: 9999,
    num: 1,
    name: '九九',
    gender: false,
    phone: '99999999999',
    did: 9999,
    iid: 9999,
    pid: 9999,
    report: true,
    iname: '九九九九',
    finishTime: 9999
  }]
})

const currentRef = ref<number | null>(1)
const currentStatus = ref<StepsProps['status']>('wait')
const current = currentRef

onMounted(async () => {
  if(!import.meta.env.SSR) {
    const res = await reqGetProcess(axiosReq)
    if(res.code != 200) {
      actErr(res.message)
    }

    if(res.data.Process.length == 0) {
      actErr('当前没有流程')
      return
    }

    ProcessRef.value = res.data

    for(let i = 0;i < ProcessRef.value.Process.length;i++) {
      currentStatus.value = transStatus(ProcessRef.value.Process[i].status)
      if(ProcessRef.value.Process[i].status == 3 && i != ProcessRef.value.Process.length - 1) {
        next()
      } else {
        return
      }
    }
  }
})
function next () {
  if (currentRef.value === null) currentRef.value = 1
  else if (currentRef.value >= ProcessRef.value.Process.length) currentRef.value = null
  else currentRef.value = currentRef.value + 1
}

</script>
<style scoped>


</style>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
